<template>
    <div class="sale-report-v3">
        <el-row :gutter="10" class="height_100">
            <el-col :span="16" class="height_100">
                <div class="left_sale_flow">
                    <searchBar ref="searchBarRef" />
                    <div style="padding: 10px">
                        <SaleCount :count_all="count_all" />
                    </div>
                    <div class="sale-box">
                        <el-row :gutter="10">
                            <el-col :span="24">
                                <div class="flex_between mb5" ref="pointsBoxRef">
                                    <div class="font_size16 flex_row">
                                        <img class="sale_flow_img" src="@/static/icon/ssss.png" alt="销售流水">
                                        <span class="ml5">{{ title1Name }}</span>
                                    </div>
                                </div>
                                <div style="width: 100%;box-sizing: border-box;">
                                    <SalesProfitGril :visibleData="safeVisibleData" />
                                </div>
                            </el-col>
                            <!-- <el-col :span="10">
                                <div class="flex_between mb5" ref="pointsBoxRef">
                                    <div class="font_size16 flex_row">
                                        <img class="sale_flow_img" src="@/static/icon/ss.png" alt="销售流水">
                                        <span class="ml5">销售排行</span>
                                    </div>
                                    <span class="font_size12">top6</span>
                                </div>
                                <SalesTop />
                            </el-col> -->
                        </el-row>
                        <el-divider></el-divider>
                        <el-row :gutter="10" class="mt10">
                            <el-col :span="12">
                                <div class="flex_between mb5" ref="pointsBoxRef">
                                    <div class="font_size16 flex_row">
                                        <img class="sale_flow_img" src="@/static/icon/ss.png" alt="销售流水">
                                        <span class="ml5">{{ title2Name }}</span>
                                    </div>
                                </div>
                                <div style="width: 100%;box-sizing: border-box;">
                                    <SalesVolume :type="'sl'" :visibleData="safeVisibleData" />
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="flex_between mb5" ref="pointsBoxRef">
                                    <div class="font_size16 flex_row">
                                        <img class="sale_flow_img" src="@/static/icon/ssss.png" alt="销售流水">
                                        <span class="ml5">{{ title3Name }}</span>
                                    </div>
                                </div>
                                <div style="width: 100%;box-sizing: border-box;">
                                    <SalesVolume :type="'ds'" :visibleData="safeVisibleData" />
                                </div>
                            </el-col>
                        </el-row>
                        <!-- <el-divider></el-divider>
                        <el-row :gutter="10" class="mt5">
                            <el-col :span="24">
                                <div class="flex_between mb5" ref="pointsBoxRef">
                                    <div class="font_size16 flex_row">
                                        <img class="sale_flow_img" style="width: 18px;"
                                            src="@/static/icon/amount_th.svg" alt="销售流水">
                                        <span class="ml5">退货额</span>
                                    </div>
                                </div>
                                <div style="width: 100%;box-sizing: border-box;">
                                    <ReturnAmount :visibleData="safeVisibleData" />
                                </div>
                            </el-col>
                        </el-row> -->
                    </div>
                </div>
            </el-col>
            <el-col :span="8" class="height_100">
                <div class="right_sale_flow" ref="rightSaleFlowRef">
                    <div class="flex_between mb5" ref="rightPointsBoxRef">
                        <div class="font_size16 flex_row">
                            <img class="sale_flow_img" style="width: 18px;" src="@/static/icon/sale.svg" alt="销售流水">
                            <span class="ml5">采购流水</span>
                        </div>
                        <span class="font_size12"></span>
                    </div>
                    <SalesRevenue ref="salesRevenueRef" :hasMore="hasMore" :loading="loading"
                        :dynamicHeight="dynamicHeight" :data="count_ls" @load-more-fun="loadMoreData" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
import searchBar from '@/pages/report/purchaseModule/searchBar.vue'
import SalesRevenue from '@/pages/report/purchaseModule/SalesRevenue.vue'
import SaleCount from '@/pages/report/purchaseModule/SaleCount.vue'
import SalesTop from '@/pages/report/purchaseModule/SalesTop.vue'
import SalesProfitGril from '@/pages/report/purchaseModule/SalesProfitGril.vue'
import SalesVolume from '@/pages/report/purchaseModule/SalesVolume.vue'
// import ReturnAmount from '@/pages/report/purchaseModule/ReturnAmount.vue'

import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import { usePurchaseState } from '@/pages/report/hooks/usePurchaseState.js'

// 获取当前组件实例
const { proxy } = getCurrentInstance()
// 使用全局状态
const { stateHooks } = useCommonHooks()

const props = defineProps({
    fromType: {
        type: String,
        default: ''
    }
})

// 使用销售状态
const {
    count_all,
    count_ls,
    loading,
    hasMore,
    loadReportShopConut,
    loadMoreData,
    resetState,
    reqQuery,
    fromTypes,
} = usePurchaseState()

watch(() => props.fromType, (newVal) => {
    console.log("props.fromType===", newVal)
    if (newVal) {
        fromTypes.value = newVal
    }
}, { immediate: true })

const title1Name = computed(() => {
    return '采购额'
})

const title2Name = computed(() => {
    return '数量'
})

const title3Name = computed(() => {
    return '单数'
})

// 使用动态高度 hooks
const rightSaleFlowRef = ref(null)
const rightPointsBoxRef = ref(null)
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: rightSaleFlowRef,
    subtractRef: rightPointsBoxRef,
    extraHeight: 30 // 额外的间距
})

const salesRevenueRef = ref(null)

// 添加一个计算属性来安全地访问 visibleData
const safeVisibleData = computed(() => {
    return salesRevenueRef.value?.visibleData || []
})

const initData = () => {
    reqQuery.value.group = ''
    resetState() // 重置所有状态
    loadReportShopConut()
}

// 组件销毁时清除数据
onBeforeUnmount(() => {
    reqQuery.value.group = ''
    resetState()
})

onUnmounted(() => {
    reqQuery.value.group = ''
    resetState()
})

watch(() => count_ls.value, (newVal) => {
    // console.log("count_ls changed in Sale.vue:", newVal)
    updateHeight()
}, { deep: true })

defineExpose({
    initData
})
</script>

<style lang="scss" scoped>
.sale-report-v3 {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: linear-gradient(90deg, #f6f4f7 0%, #faf3fb 100%);
}

.sale-container {
    box-sizing: border-box;
    height: 100%;
}

.left_sale_flow,
.right_sale_flow {
    box-sizing: border-box;
    border-radius: 10px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid rgb(232, 234, 242);
    background: linear-gradient(224deg, rgba(255, 255, 255, 0) -18%, rgb(255, 255, 255) 24%, rgb(255, 255, 255) 76%, rgba(241, 241, 255, 0) 131%), rgb(235, 235, 255);
}

.select_store ::v-deep .el-input__inner {
    background-color: #fff !important;
    border: none !important;
    color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.left_sale_flow {
    .sale-box {
        padding: 0 15px;
    }
}


.right_sale_flow {
    padding: 10px;
}

.height_100 {
    height: 100%;
}

.sale_flow_img {
    width: 26px;
    height: auto;
}

::v-deep .el-divider {
    margin: 0 !important;
}
</style>